<template>
	<view class="login" :style="{zoom:(getZoom?getZoom():1.0)}">
		<!-- <view><image style="width: 100%;" mode="aspectFill" src="/static/login/bg_login.png"></image></view> -->
		<view class="container">
			<view class="header">
				<image mode="widthFix" src="/static/logo.png" />
			</view>
			<!-- 用户名块 -->
			<view class="cli-div">
				<text class="iconfont cli-icon">&#xe66a;</text>
				<input class="su-input"
					placeholder="请输入您的账号"
					placeholder-style="color:#b1b1b1; font-size:30rpx"
					v-model="username" />
				<text class="iconfont icon-clear" 
					v-if="username.length > 0" @click="username = ''" />
			</view>
			<!-- 密码块 -->
			<view class="cli-div" style="margin-top:60rpx;">
				<text class="iconfont cli-icon">&#xe649;</text>
				<input class="su-input" type="text"
					:password="showPassword" v-model="password"
					placeholder="请输入您的密码" placeholder-style="color:#b1b1b1;font-size:30rpx"
					@confirm="_login" />
				<text class="iconfont" 
					:class="[showPassword ? 'icon-yanjing-zheng' : 'icon-yanjing-bi']" 
					@click="showPassword=!showPassword"></text>
			</view>
			<!-- 自动登录块 -->
			<view class="label-div" style="border:none;margin-top:30px;">
				<view class="su-flex">
					<label class="su-label" @click="autoLogin=!autoLogin">
						<checkbox 
							:class="['su-checkbox', 'blue', autoLogin ? 'checked' : '', isIos ? 'ios' : '']"
							:checked="autoLogin"></checkbox>
						<text class="text">自动登录</text>
					</label>
				</view>
				<view class="su-flex" style="text-align: right;">
					<label class="su-forget">忘记密码?</label>
				</view>
			</view>
			<!-- 登陆按钮 -->
			<view class="su-button-div">
				<!-- #ifdef MP -->
				<su-button text="登 录" bgColor="#33a0d6" :rotate="isRotate"
					@click="_login"></su-button>
				<!-- #endif -->
				<!-- #ifndef MP -->
				<su-button text="登 录" :bgColor="$mainColor" :rotate="isRotate"
					@click="_login"></su-button>
				<!-- #endif -->
				
			</view>
		</view>
		<view class="foot">
			<image class="bg-img" mode="aspectFill" src="/static/login/bg_bottom.jpg"></image>
			<view class="copyright">
				<text>Copyright ©YunNan AgileSoft Technology CO.,LTD.</text>
			</view>
		</view>
		<message ref="message"></message>
	</view>
</template>

<script>
/**
 * 登录页面
 */
import suButton from '@/components/su-button/su-button.vue'
export default {
	components: {
		suButton
	},
	data() {
		return {
			//自动登录次数
			reloadNum: 3,
			//用户相关
			username: '',
			password: '',
			autoLogin: false,
			showPassword: true,
			//登录按钮
			loginButton: {
				text: '登 录',
				disabled: false,
				loadding: false
			},
			isIos: uni.sutils.isIos(),
			isRotate: false //是否加载旋转
		}
	},
	onLoad() {
		this.username = uni.getStorageSync('un')||""
		this.autoLogin = uni.getStorageSync('_autoLogin')||false
	},
	methods: {
		_login() {
			if (this.isRotate) {
				//判断是否加载中，避免重复点击请求
				return false
			} 
			if (!this.username) {
				return uni.core.message("请输入用户名", "error")
			}
			if (!this.password) {
				return uni.core.message("请输入密码", "error")
			}
			this.isRotate = true
			var encrypt = require("./encrypt")
			let encryptor = new encrypt.JSEncrypt()
			encryptor.setPublicKey(uni.core.encryptKey)
			var ps = encryptor.encrypt(this.password)
			uni.core.login(this.username, encodeURIComponent(ps), (data, flag, msg) => {
				if (flag) {
					if (this.autoLogin) {
						uni.setStorage({key:"ep",data:ps})
						uni.setStorage({key:"_autoLogin",data:true})
					} else {
						uni.setStorage({key:"_autoLogin",data:false})
					}
					uni.core.message("登录成功", "success")
					setTimeout(()=>{
						uni.core.appInitial((_flag,_msg) => {
							if(_flag){
								uni.switchTab({
									url: '/pages/tabbar/index/index'
								})
							}else if(_msg==="Data128") {
								this.isRotate = false
								return this._login()
							}else {
								uni.core.message( _msg, 'error')
								this.isRotate = false
							}
						})
					},300)
				} else {
					if ("Data must not be longer than 128 bytes" == msg || "101"== msg) {
						this.isRotate = false
						return this._login()
					} else {
						uni.core.message(msg, 'error')
					}
					setTimeout(() => {
						this.isRotate = false
					}, 1000)
				}
			})
		}
	}
};
</script>

<style lang="scss">
	@import './login.scss';
	.white {
		background-color: #ffffff;
	}
</style>
